import React from 'react';
import { SetInputData } from '@/util/set';
import { connect } from 'react-redux';

import { NavBar, InputItem, TextareaItem, Button } from 'antd-mobile';
import AvatarSelector from '@/component/avatarselector/avatarselector';

import { finishUserInfo } from '@/redux/modules/userInfo';

@connect(
    state => state.user.userInfo,
    { finishUserInfo }
)
class FinishedInfo extends SetInputData{
    constructor(props){
        super(props);
        
        this.condition = {
            _id: this.props.id,
        }

        this.state = {
            tx: '',
            jj: '',
            zw: '',
            m: ''
        }

        this.cm = this.cm.bind(this);
    }
    cm(){
        this.props.finishUserInfo({...this.state, ...this.condition});
    }
    render(){
        const { userType } = this.props,
              { setTx, setJj, setZw, setM, cm } = this,
              { jj, zw, m } = this.state;
       
        return (
        <div>
            <NavBar mode="drak">{userType === 1 ? 'Boss' : 'Niu'}完善信息页</NavBar>
            <AvatarSelector selectTx={setTx}></AvatarSelector>
            {
                userType === 1 
                ? 
                <div>
                    <InputItem onChange={setZw} value={zw}>招聘职位</InputItem>
                    <TextareaItem rows="3" onChange={setJj} value={jj} title="职位要求"></TextareaItem>
                    <InputItem onChange={setM} value={m}>钱</InputItem>
                </div> 
                : 
                <div>
                    <InputItem onChange={setZw} value={zw}>求职职位</InputItem>
                    <TextareaItem rows="3" onChange={setJj} value={jj} title="个人简介"></TextareaItem>
                </div>
            }
            <Button type="primary" onClick={cm}>提交</Button>
        </div>
        )
    }
}

export default FinishedInfo;